<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        height: 100px;
        background-color: #f00;
    }
    .box{
        position: relative;
        left:0;
        width: 200px;
        height: 100px;
        background-color: orange;
        /* 高质量浏览器 box 在进行一些css属性 变化的时候有一个过渡效果 */

        /*     transitionproperty: 指定应用过渡属性的名称
        口 all: 所有属性都执行动画;
        口 none: 所有属性都不执行动画;
        口 CSS属性名称: 要执行动画的CSS属性名称，比如width、left、transform等; */
        /* transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in;
        transition-delay: 1s; */

        /* 简写属性 */
        transition: all 1s ease-in 0s;
    }
    .container:hover .box{
        left:100px;
        transform: translate(100px);
        width: 500px;
    }
</style>
<body>
    <!-- 
    什么是transition动画呢?
    口 css transitions提供了一种在更改CSS属性时控制动画速度的方法
    口 可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的;
    口 比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效;
    口但是我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化

    通常将两个状态之间的过渡称为隐式过渡(implicit transitions)，因为开始与结束之间的状态由浏览器决定,

    CSS transitions 可以决定
    口 哪些属性发生动画效果(明确地列出这些属性)
    何时开始(设置 delay)
    持续多久(设置 duration)
    口如何动画(定义timing function，比如速地或先快后慢)。

    transition CSS 属性是 transition-property, transition-duration, transition-timing-function 和 transition-delay 的一个简写属性。


-->
<div class="container">
    <div class="box"></div>
</div>
</body>
</html>